<template>
  <div class="app-container">
    <!-- 查询操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-input v-model="formInline.giftCardName" clearable style="width: 200px;" :placeholder='$t("请输入礼物卡名称")'/>
        <el-select
          v-model="formInline.classificationId"
          clearable
          filterable
          :placeholder="$t('请选择礼物卡分类')"
        >
          <el-option
            v-for="item in cardList"
            :key="item.id"
            :value="item.id"
            :label="item.classificationName"
          ></el-option>
        </el-select>
        <el-select v-model="formInline.shopId" clearable filterable :placeholder='$t("请选择门店")'>
          <el-option v-for="item in shops" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>

        <el-date-picker
          v-model="formInline.dateRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="datePickerShortcuts"
        />

        <el-button type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
      </el-form>
    </div>
    <el-card class="box-card">
      <h3>{{$t("概况")}}</h3>
      <div class="table-layout">
        <el-row>
          <el-col :span="3" class="table-cell-title">{{$t('礼物卡总数量')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t("绑卡总量")}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('未使用/张')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('使用中/张')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('已停用/张')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('总充值金额')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('总余额金额')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('总消费金额')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">{{ gift.numbers==0?$t("无限量"): gift.numbers || 0}}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.bindNum || 0}}</el-col>
          <el-col :span="3" class="table-cell">{{ gift.noUseNum || 0 }}</el-col>
          <el-col :span="3" class="table-cell">{{gift.inUseNum || 0}} </el-col>
          <el-col :span="3" class="table-cell">{{ gift.stopNum || 0  }}</el-col>
          <el-col :span="3" class="table-cell">{{ NumberUtils.formatCurrency(gift.totalRechargeAmount)  }}</el-col>
          <el-col :span="3" class="table-cell">{{ NumberUtils.formatCurrency(gift.totalAmount)  }}</el-col>
          <el-col :span="3" class="table-cell">{{ NumberUtils.formatCurrency(gift.useAmount)  }}</el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="box-card">
      <h3>{{$t('实物卡')}}</h3>

      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="userList" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column
          :label="$t('序号')"
          width="60"
          align="center"
          type="index"
          :index="(index) => (formInline.page - 1) * formInline.limit + index + 1"
        />
        <el-table-column align="center" :label='$t("礼物卡名称")' prop="name">
        </el-table-column>
        <el-table-column align="center" :label='$t("礼物卡分类")' prop="classificationName">
        </el-table-column>
        <el-table-column align="center" :label='$t("礼物卡数量")' prop="numbers">
          <template slot-scope="scope">
            <el-tag>{{scope.row.numbers==0?$t("无限量"):scope.row.numbers}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("绑卡数量")' prop="numbers">
          <template slot-scope="scope">
            <el-tag>{{scope.row.bindNum}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("已绑定/张")' prop="numbers">
          <template slot-scope="scope">
            <el-tag>{{scope.row.bindNum}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("未绑定/张")' prop="numbers">
          <template slot-scope="scope">
            <el-tag>{{scope.row.numbers - scope.row.bindNum}}</el-tag>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" :label="总数(占比)" prop="numbers"/>-->
        <el-table-column align="center" :label="$t('未使用/张')" prop="noUseNum"/>
        <el-table-column align="center" :label="$t('使用中/张')" prop="inUseNum"/>
        <el-table-column align="center" :label="$t('已停用/张')" prop="stopNum"/>
        <el-table-column align="center" :label='$t("总充值余额")' prop="totalAmount">
          <template slot-scope="scope">
            {{NumberUtils.formatCurrency(scope.row.totalRechargeAmount)}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("总余额")' prop="totalAmount">
          <template slot-scope="scope">
            {{NumberUtils.formatCurrency(scope.row.totalAmount)}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("总消费")' prop="useAmount">
          <template slot-scope="scope">
            {{NumberUtils.formatCurrency(scope.row.useAmount)}}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            :label="$t('上架时间')"
            prop="updateTime"
        >
          <template slot-scope="scope">
            <span style="display: block">{{
                formatDateToYYYYMMDD(scope.row.addTime)
              }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("操作")'>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleBind(scope.row)">{{$t('详情')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="userTotal>0" :total="userTotal" :page.sync="formInline.page" :limit.sync="formInline.limit" @pagination="getUserList" />
    </el-card>

  </div>
</template>

<script>
  import { statisticTotal,entityStatisticTotal } from "@/api/gift";
    import { allForPerm } from '@/api/shop'
  import { cardClassificationList } from "@/api/cardClassification";
  import Pagination from '@/components/Pagination'
  import NumberUtils from "../../utils/numberUtils";
  import {datePickerShortcuts, formatDateToYYYYMMDD} from "../../utils/date"; // Secondary package based on el-pagination
  export default {
    name: "cardStatistics",
    components:{ Pagination },
    data(){
      const typeMap = {
        '1': this.$t('全场通用'),
        '2': this.$t('指定类目')
      }
      return {
        NumberUtils,
        shops:[],//所有门店信息
        gift: {},
        formInline:{
          page: 1,
          limit: 10,
          sort: 'add_time',
          order: 'desc',
          dateRange: [],
          startTime: undefined,
          endTime: undefined,
        },
        datePickerShortcuts,
        //卡类型
        cardList:[],
        typeMap,
        userList: [],
        userTotal: 0,
        listLoading: false,
        bindDialogVisible: false,
        bindForm: {
          id: undefined,
          entityCardCode: undefined
        }
      }
    },
    created() {
      this.getDetail()
      this.getCardClassification();
      this.getUserList()
           allForPerm().then(response=>{
        this.shops = response.data.data.list
         })
    },
    methods: {
      formatDateToYYYYMMDD,
      //获取卡类型列表
      getCardClassification() {
        var formInline = {
          classificationName: undefined,
          classificationStatus: undefined,
          page: 1,
          limit: 1000,
          sort: "add_time",
          order: "desc",
        };
        cardClassificationList(formInline)
          .then((response) => {
            this.cardList = response.data.data.list;
          })
          .catch(() => {
            this.cardList = [];
          });
      },
      getDetail(){
        statisticTotal(this.formInline).then(responnse=>{
          this.gift = responnse.data.data
        })
      },
      getUserList(){
         this.listLoading = true
        entityStatisticTotal(this.formInline)
          .then(response => {
            this.userList = response.data.data.list
            this.userTotal = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.userList = []
            this.userTotal = 0
            this.listLoading = false
          })
      },
      handleFilter(){
        this.getDetail()
        this.getUserList()
      },
      handleBind(row){
           this.$router.push({path: '/promotion/cardStatistics/cardStatisticsdetail', query:{id:row.giftCardId }})
      },
    }
  }
</script>

<style scoped>
  .filter-container {
    margin-top: 20px;
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }
  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }
  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
